<template>
  <div id="index">
    <div class="crumbs">
      <top-title />
      <div class="filterBox">
        <div class="viewFunnelBox" style="border-bottom: #e7e7e7 1px solid">
          <div class="step-wrap-thing">
            <div class="lineHeader">选择事件</div>
            <div>
              <div class="step-wrap-thing-set">设置关联属性</div>
              <el-switch v-model="relProperty" active-color="#13ce66">
              </el-switch>
            </div>
          </div>
        </div>
        <div
          class="viewFunnelBox"
          style="padding-bottom: 10px; border-bottom: #e7e7e7 1px solid"
        >
          <div class="step-wrap">
            <div class="lineHeader">初始行为</div>
            <div style="position: absolute; height: 32px; left: 130px">
              <!--        选择框-->
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="fristThingOptions = true"
                >{{ fristThing.cname || "请选择" }}
              </el-button>
              <!--          内置选择框-->
              <ml-options
                v-if="fristThingOptions"
                :initEventGroupDetail="eventAll"
                v-clickoutside="handleClickOutSide"
                :initEventGroup="eventGroup"
                :currentEvent="fristThing"
                :origin="0"
                @choInitEventEnd="choInitEventEnd"
              ></ml-options>

              <el-button
                type="text"
                icon="el-icon-full-screen"
                size="small"
                style="margin-left: 10px"
                @click="editCond(0)"
                >筛选</el-button
              >
            </div>
          </div>
          <ml-custom-screen
            :ref="`customScreenRef0`"
            :isSupName="true"
            :supName="fristThing.eventId"
          ></ml-custom-screen>
          <div class="step-wrap" v-show="relProperty">
            <div class="lineHeader">关联属性</div>
            <div style="position: absolute; height: 32px; left: 130px">
              <el-select size="small" v-model="fristThingtRel" value-key="name">
                <el-option
                  v-for="item in fristThingProperty"
                  :key="item.cname"
                  :label="item.cname"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="step-wrap">
            <div class="lineHeader">后续行为</div>
            <div style="position: absolute; height: 32px; left: 130px">
              <!--        选择框-->
              <el-button
                icon="el-icon-full-screen"
                size="small"
                @click="lastThingOptions = true"
                >{{ lastThing.cname || "请选择" }}
              </el-button>
              <!--          内置选择框-->
              <ml-options
                v-if="lastThingOptions"
                :initEventGroupDetail="eventAll"
                v-clickoutside="handleClickOutSide"
                :initEventGroup="eventGroup"
                :currentEvent="lastThing"
                :origin="1"
                @choInitEventEnd="choInitEventEnd"
              ></ml-options>

              <el-button
                type="text"
                icon="el-icon-full-screen"
                size="small"
                style="margin-left: 10px"
                @click="editCond(1)"
                >筛选</el-button
              >
            </div>
          </div>
          <ml-custom-screen
            :ref="`customScreenRef1`"
            :isSupName="true"
            :supName="lastThing.eventId"
          ></ml-custom-screen>
          <div class="step-wrap" v-show="relProperty">
            <div class="lineHeader">关联属性</div>
            <div style="position: absolute; height: 32px; left: 130px">
              <el-select size="small" v-model="lastThingtRel" value-key="name">
                <el-option
                  v-for="item in lastThingProperty"
                  :key="item.cname"
                  :label="item.cname"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>

        <ml-custom-screen
          :ref="`customScreenRef2`"
          :isEvent="'false'"
        ></ml-custom-screen>

        <div class="viewFunnelBox">
          <div class="step-wrap">
            <div class="lineHeader">
              <div>按</div>
              <div>
                <el-button
                  icon="el-icon-full-screen"
                  size="small"
                  @click="readTag = true"
                >
                  {{ readValues.cname || "总体" }}
                </el-button>
                <ml-category-filtering
                  v-if="readTag"
                  v-clickoutside="handleClickOutSide"
                  @selectItem="selectItem"
                  :have-total="'true'"
                  :tabsHeadParams="readHeads"
                  :tabsBodyParams="readBodys"
                ></ml-category-filtering>
              </div>
              <div style="font-size: small; margin-left: 10px">查看</div>

              <div style="margin-left: 10px; position: absolute; right: 30px">
                <el-button
                  type="primary"
                  size="small"
                  style="width: 192px; margin-right: 30px"
                  @click="search()"
                  >分析计算
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="step-wrap">
          <div style="position: relative; height: 32px; margin-left: 12px">
            <el-button
              type="text"
              icon="el-icon-full-screen"
              size="small"
              style="margin-left: 10px"
              @click="editCond(2)"
              >且用户符合</el-button
            >
          </div>
        </div>
      </div>
      <!--      图表-时间选择器-->
      <div class="filterBox">
        <!--        时间选择-->
        <div class="winPeriodBox">
          <timeRestrict
            :oldTime="dateS"
            :timeRestrict="timeRestrict"
            @change="dateSChange"
          ></timeRestrict>
          <el-select v-model="unit" style="width: 110px; margin: 0 10px">
            <el-option
              v-for="item in timeUnit"
              :key="item.unit"
              :label="item.unit"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div>
            <el-button @click="displaySetting = true">显示设置</el-button>
            <div class="display-setting-box" v-show="displaySetting">
              <ml-display-setting
                v-clickoutside="handleSetting"
                :report="report"
                @selectByValues="selectByValues"
                @selectTags="selectTags"
              ></ml-display-setting>
            </div>
          </div>
        </div>
        <!--        盒须图-->
        <div id="chart" style="width: 100%; height: 400px"></div>

        <ml-table-funnel
          :byRead="readValuesIndex === 1"
          :byDate="unit === 'all'"
          :resData="report"
        ></ml-table-funnel>
      </div>
    </div>
  </div>
</template>

<script>
/*组件*/
import TopTitle from "./topTitle";

/* 筛选项框*/
import CustomScreen from "./customScreen";

/* 事件分组框*/
import Options from "./options";

/* 标签过滤框*/
import CategoryFiltering from "./categoryFiltering";

/*  日历选择*/
import timeSelect from "./timeSelect";

/*  表格展示组件 */
import TableFunnel from "./tableFunnel";

/* 数据参数*/
import DataConfig from "./dataType.config";

/* 显示设置*/
import DisplaySetting from "./displaySetting";

/* 点击控件外时触发事件*/
import clickoutside from "element-ui/src/utils/clickoutside";

/* 接口APi*/
import {
  thinglList,
  thinglGroup,
  propertyList,
  searchData,
} from "./api.config";

export default {
  name: "index",
  components: {
    //TableFunnel,
    "ml-options": Options,
    TopTitle,
    "ml-custom-screen": CustomScreen,
    "ml-category-filtering": CategoryFiltering,
    "ml-time-select": timeSelect,
    "ml-table-funnel": TableFunnel,
    "ml-display-setting": DisplaySetting,
  },
  directives: { clickoutside },
  data() {
    return {
      dateS: [], // 开始时间段
      timeRestrict: {
        function: "absolute_time",
        params: [this.getBeforeDate(2), this.getBeforeDate()],
      }, // 动态时间参数

      startDate: this.getBeforeDate(2),
      endDate: this.getBeforeDate(),
      //关联属性开关
      relProperty: false,
      //初始行为
      fristThing: {},
      //初始行为展示框
      fristThingOptions: false,
      //初始行为事件列表
      fristThingProperty: [],
      //初始行为关联属性
      fristThingtRel: {},
      //后续行为
      lastThing: {},
      //后续行为展示框
      lastThingOptions: false,
      //后续行为事件列表
      lastThingProperty: [],
      //后续行为关联属性
      lastThingtRel: {},
      //用户属性
      userPropertiesList: [],
      //所有行为事件
      eventAll: [],
      //事件组
      eventGroup: [],
      //显示设置开关
      displaySetting: false,
      //返回结果
      report: null,
      //合计
      unit: DataConfig.timeUnit[0].value,
      //显示设置
      timeUnit: DataConfig.timeUnit,
      //设置关联属性
      isRelationSwitch: false,
      //标签头
      readHeads: [
        "初始行为事件属性",
        "后续行为事件属性",
        "用户属性",
        "用户分群",
        "用户标签",
      ],
      //是否展示标签
      readTag: false,
      //标签属性
      readValues: {},
      //当前选择标签头部下标
      readValuesIndex: -1,
      /* 窗口期 */
      winPeriod: ["", ""],
      //显示分组
      byValues: [],
      //指标
      tags: [],
      //显示指标
      checkedTags: [],
    };
  },
  computed: {
    //按XXX查看选择器的属性值
    readBodys: function () {
      return [
        {
          total: this.fristThingProperty.length,
          list: this.fristThingProperty,
        },
        { total: this.lastThingProperty.length, list: this.lastThingProperty },
        {
          total: this.userPropertiesList.length,
          list: this.userPropertiesList,
        },
        { total: 1, list: [] },
        { total: 1, list: [] },
      ];
    },
  },
  methods: {
    getBeforeDate(number) {
      let num = number;
      let date = new Date();

      let year = date.getFullYear();
      let mon = date.getMonth() + 1;
      let day = date.getDate();

      if (typeof num === "number") {
        if (day <= num) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }

        date.setDate(date.getDate() - num);

        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
      }

      return (
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day)
      );
    },
    //  追加对比 时间函数
    timeContrast(v) {
      let arr = [0, 0];
      // 同段时间
      if (v == "1") {
        let c = new Date(this.dateS[1]) - new Date(this.dateS[0]);
        arr[1] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[0] = arr[1] - c;
      }
      // 自定义时间
      if (v == "2") {
        arr[0] = new Date(this.dateS[0]) - 24 * 60 * 60 * 1000;
        arr[1] = new Date(this.dateS[1]) - 24 * 60 * 60 * 1000;
      }
      this.dateD = arr;
    },
    dateSChange(newValue) {
      let { sendTimeArr, timeRestrict } = newValue;
      this.timeRestrict = timeRestrict;
      this.dateS = [sendTimeArr[0], sendTimeArr[1]];
      this.startDate = sendTimeArr[0];
      this.endDate = sendTimeArr[1];
      let contrastStartDate = null;
      let contrastEndDate = null;
      if (this.dateD && this.dateD[0]) {
        let date = new Date(this.dateD[0]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastStartDate = year + "-" + mon + "-" + day;
      }
      if (this.dateD && this.dateD[1]) {
        let date = new Date(this.dateD[1]);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        contrastEndDate = year + "-" + mon + "-" + day;
      }

      // this.$emit("conversion", {
      //   unit: this.unit,
      //   startDate,
      //   endDate,
      //   contrastStartDate,
      //   contrastEndDate,
      //   timeRestrict    // 动态时间配置集合
      // });
    },
    //点击分析计算
    search() {
      let _this = this;
      let firstEvent = {};
      firstEvent["eventName"] = this.fristThing.eventId;
      firstEvent["filter"] =
        this.$refs["customScreenRef0"].getFilterConditions();
      firstEvent["relevanceField"] =
        "event." + this.fristThing.eventId + "." + this.fristThingtRel.name;

      let secondEvent = {};
      secondEvent["eventName"] = this.lastThing.eventId;
      secondEvent["filter"] =
        this.$refs["customScreenRef1"].getFilterConditions();
      secondEvent["relevanceField"] =
        "event." + this.lastThing.eventId + "." + this.lastThingtRel.name;

      let filter = this.$refs["customScreenRef2"].getFilterConditions();

      let byField = null;
      switch (this.readValuesIndex) {
        case 0:
          byField =
            "event." + this.fristThing.eventId + "." + this.readValues.name;
          break;
        case 1:
          byField =
            "event." + this.lastThing.eventId + "." + this.readValues.name;
          break;
        case 2:
          byField = "user" + "." + this.readValues.name;
          break;
      }

      let unit = this.unit;


      //可能有用的条件
      let byFields = [this.fristThing.eventId];
      let byEvents = ["first"];
      let measureValues = ["max", "min"];

      let param = {};
      param["firstEvent"] = firstEvent;
      param["secondEvent"] = secondEvent;
      param["filter"] = filter;
      param["byField"] = byField;
      param["unit"] = unit;
      param["fromDate"] = this.startDate;
      param["toDate"] = this.endDate;

      param["byFields"] = byFields;
      param["byEvents"] = byEvents;
      param["measureValues"] = measureValues;

      let params = {
        req: param,
        operationCtx: {},
      };

      searchData(params).then((res) => {
        if (res.data.success !== true) {
          return;
        }
        _this.byValues = res.data.value.byValues;
        _this.tags = ["最大值", "最小值", "平均值", "四分位", "中位数"];
        _this.report = res.data.value;
        _this.reloadChart();
      });
    },
    //显示设置--显示分组
    selectByValues(res) {
      this.byValues = res;
      this.reloadChart();
    },
    selectTags(res) {
      this.tags = res;
      this.reloadChart();
    },
    //选择事件结束
    choInitEventEnd(res) {
      let _this = this;
      switch (res.origin) {
        case 0:
          this.fristThing = res.mes;
          this.fristThingOptions = false;
          new Promise((resolve, reject) => {
            let params = {
              req: {
                events: [this.fristThing.eventId],
                type: "event",
                needEventTime: true,
              },
              operationCtx: {},
            };
            propertyList(params).then((res) => {
              // 返回状态码如果不是成功说明异常 弹出提示
              if (res.data.success !== true) {
                this.$message.error(res.data.errorMessage);
                return;
              }

              _this.fristThingProperty = res.data.value.list;
              resolve();
            });
          });
          break;
        case 1:
          this.lastThing = res.mes;
          this.lastThingOptions = false;
          new Promise((resolve, reject) => {
            let params = {
              req: {
                events: [this.lastThing.eventId],
                type: "event",
                needEventTime: true,
              },
              operationCtx: {},
            };
            propertyList(params).then((res) => {
              // 返回状态码如果不是成功说明异常 弹出提示
              if (res.data.success !== true) {
                this.$message.error(res.data.errorMessage);
                return;
              }

              _this.lastThingProperty = res.data.value.list;
              resolve();
            });
          });
          break;
      }
    },
    //点击控件外
    handleClickOutSide() {
      this.readTag = false;
      this.fristThingOptions = false;
      this.lastThingOptions = false;
    },
    handleSetting() {
      this.displaySetting = false;
    },
    //昨天的时间
    getYesterday() {
      let timenow = new Date();
      timenow.setDate(timenow.getDate() - 1); //设置天数 -1 天，昨天的日期
      let y = timenow.getFullYear(); //年
      let m = timenow.getMonth() + 1; //月
      m = m < 10 ? "0" + m : m;
      let d = timenow.getDate(); //日
      d = d < 10 ? "0" + d : d;
      let yesterdayTime = y + "-" + m + "-" + d; //字符串拼接成自己想要的时间格式，现在是yyyy/mm/dd格式
      this.winPeriod = [yesterdayTime, yesterdayTime];
    },

    //时间选择
    timeUnity(time) {
      this.winPeriod = time;
    },

    //图表控件处理
    reloadChart() {
      if (this.report) {
        let option = this.getOption(this.report);
        let myChart = this.$echarts.init(document.getElementById("chart"));
        myChart.clear();
        myChart.setOption(option);
        this.$forceUpdate();
      }
    },
    /* 选择属性 */
    selectItem(attribute, index) {
      this.readValues = attribute;
      this.readValuesIndex = index;
      this.readTag = false;
      this.$forceUpdate();
    },
    getOption(report) {
      let data = [];

      for (let i = 0; i < report.byValues.length; i++) {
        let valueItem = [];
        if (this.unit === "all") {
          for (let j = 0; j < 1; j++) {
            let dateItem = [];
            if (this.tags.indexOf("最大值") !== -1) {
              dateItem.push(report.maxTime[i][j]); //最大值
            } else {
              dateItem.push(report.quartile3[i][j]); //最大值
            }
            dateItem.push(report.quartile3[i][j]); //上四分位
            dateItem.push(report.medianTime[i][j]); //中位
            dateItem.push(report.quartile1[i][j]); //下四分位
            if (this.tags.indexOf("最小值") !== -1) {
              dateItem.push(report.minTime[i][j]); //最小数值
            } else {
              dateItem.push(report.quartile1[i][j]); //最小数值
            }
            dateItem.push(report.avgTime[i][j]); //平均值
            valueItem.push(dateItem);
          }
        } else {
          for (let j = 1; j < report.dateList.length; j++) {
            let dateItem = [];
            if (this.tags.indexOf("最大值") !== -1) {
              dateItem.push(report.maxTime[i][j]); //最大值
            } else {
              dateItem.push(report.quartile3[i][j]); //最大值
            }
            dateItem.push(report.quartile3[i][j]); //上四分位
            dateItem.push(report.medianTime[i][j]); //中位
            dateItem.push(report.quartile1[i][j]); //下四分位
            if (this.tags.indexOf("最小值") !== -1) {
              dateItem.push(report.minTime[i][j]); //最小数值
            } else {
              dateItem.push(report.quartile1[i][j]); //最小数值
            }
            dateItem.push(report.avgTime[i][j]); //平均值
            valueItem.push(dateItem);
          }
        }

        let axisData = [];
        if (this.unit === "all") {
          for (let j = 0; j < 1; j++) {
            axisData.push(j.toString());
          }
        } else {
          for (let j = 1; j < report.dateList.length; j++) {
            axisData.push(j.toString());
          }
        }

        let xAxisItem = {
          axisData: axisData,
          boxData: valueItem,
        };
        data.push(xAxisItem);
      }

      let xAxis = [];

      if (this.unit === "all") {
        xAxis.push("总体");
      } else {
        for (let i = 1; i < report.dateList.length; i++) {
          xAxis.push(report.dateList[i]);
        }
      }

      let legendData = [];
      if (this.readValuesIndex === -1) {
        this.byValues.length === 1 ? legendData.push("总体") : "";
      } else {
        for (let i = 0; i < report.byValues.length; i++) {
          if (this.byValues.indexOf(report.byValues[i]) > -1) {
            legendData.push(report.byValues[i]);
          }
        }
      }

      let seriesItems = [];
      if (this.readValuesIndex === -1) {
        if (this.byValues.length === 1)
          seriesItems.push({
            name: "总体",
            type: "boxplot",
            data: data[0].boxData,
            tooltip: { formatter: this.formatter },
          });
      } else {
        for (let i = 0; i < report.byValues.length; i++) {
          if (this.byValues.indexOf(report.byValues[i]) > -1) {
            seriesItems.push({
              name: report.byValues[i],
              type: "boxplot",
              data: data[i].boxData,
              tooltip: { formatter: this.formatter },
            });
          }
        }
      }
      let option = {
        // title: {
        //   text: '标题名字',
        //   left: 10,//标题显示的位置
        // },
        legend: {
          y: "10%",
          data: legendData,
        },
        tooltip: {
          trigger: "item",
          // axisPointer: {
          //   type: 'shadow'
          // }
        },
        grid: {
          left: "10%",
          top: "20%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          data: xAxis,
          boundaryGap: true,
          nameGap: 30,
          axisLabel: {
            formatter: "{value}",
          },
        },
        yAxis: {
          /*min:-400,//可自定义y轴的最大和最小值
          max:600,*/
          type: "value",
          // name: 'Value',
        },
        series: seriesItems,
        // color: ["#7EC0EE", "#FF9F7F", "#FFD700", "#C9C9C9", "#E066FF", "#C0FF3E"]
      };
      return option;
    },
    formatter(param) {
      if (param.data[1] === param.data[2] && param.data[5] === param.data[4]) {
        return [
          param.seriesName,
          "上四分位: " + this.formatSeconds(param.data[2]),
          "中位数: " + this.formatSeconds(param.data[3]),
          "下四分位: " + this.formatSeconds(param.data[4]),
          "平均值: " + this.formatSeconds(param.data[6]),
        ].join("<br/>");
      } else if (param.data[5] === param.data[4]) {
        return [
          param.seriesName,
          "最大值: " + this.formatSeconds(param.data[1]),
          "上四分位: " + this.formatSeconds(param.data[2]),
          "中位数: " + this.formatSeconds(param.data[3]),
          "下四分位: " + this.formatSeconds(param.data[4]),
          "平均值: " + this.formatSeconds(param.data[6]),
        ].join("<br/>");
      } else if (param.data[1] === param.data[2]) {
        return [
          param.seriesName,
          "上四分位: " + this.formatSeconds(param.data[2]),
          "中位数: " + this.formatSeconds(param.data[3]),
          "下四分位: " + this.formatSeconds(param.data[4]),
          "最小值: " + this.formatSeconds(param.data[5]),
          "平均值: " + this.formatSeconds(param.data[6]),
        ].join("<br/>");
      } else {
        return [
          param.seriesName,
          "最大值: " + this.formatSeconds(param.data[1]),
          "上四分位: " + this.formatSeconds(param.data[2]),
          "中位数: " + this.formatSeconds(param.data[3]),
          "下四分位: " + this.formatSeconds(param.data[4]),
          "最小值: " + this.formatSeconds(param.data[5]),
          "平均值: " + this.formatSeconds(param.data[6]),
        ].join("<br/>");
      }
    },

    editCond(index) {
      this.$refs[`customScreenRef${index}`].editCond();
    },

    formatSeconds(value) {
      var theTime = parseInt(value); // 秒
      var middle = 0; // 分
      var hour = 0; // 小时

      if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
        }
      }
      var result = "" + parseInt(theTime) + "秒";
      if (middle > 0) {
        result = "" + parseInt(middle) + "分" + result;
      }
      if (hour > 0) {
        result = "" + parseInt(hour) + "小时" + result;
      }
      return result;
    },
  },

  created() {
    //获取所有事件
    let _this = this;
    let network = new Promise((resolve, reject) => {
      let params = {
        req: {
          appId: JSON.parse(window.sessionStorage.getItem("appItem")).appId,
        },
        operationCtx: {},
      };
      thinglList(params).then((res) => {
        if (res.data.success !== true) {
          reject(res.data.errorMessage);
          return;
        }
        _this.eventAll = res.data.value.list;
        resolve();
      });
    });

    network.then((value) => {
      new Promise((resolve, reject) => {
        let params = {
          req: {
            appId: JSON.parse(window.sessionStorage.getItem("appItem")).appId,
          },
          operationCtx: {},
        };
        thinglGroup(params).then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            this.$message.error(res.data.errorMessage);
            reject(res.data.errorMessage);
            return;
          }
          _this.eventGroup = res.data.value;
          _this.fristThing = _this.eventGroup[0].mateEventList[0];
          _this.lastThing = _this.eventGroup[0].mateEventList[0];
          resolve();
        });
      });
    });

    //获取初始行为对应的属性列表
    network.then((value) => {
      new Promise((resolve, reject) => {
        let params = {
          req: {
            events: [_this.fristThing.eventId],
            type: "event",
            needEventTime: true,
          },
          operationCtx: {},
        };
        propertyList(params).then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            this.$message.error(res.data.errorMessage);
            reject(res.data.errorMessage);
            return;
          }

          _this.fristThingProperty = res.data.value.list;
          resolve();
        });
      });
    });

    //获取后续行为对应的属性列表
    network.then((value) => {
      new Promise((resolve, reject) => {
        let params = {
          req: {
            events: [_this.lastThing.eventId],
            type: "event",
            needEventTime: true,
          },
          operationCtx: {},
        };
        propertyList(params).then((res) => {
          // 返回状态码如果不是成功说明异常 弹出提示
          if (res.data.success !== true) {
            this.$message.error(res.data.errorMessage);
            reject(res.data.errorMessage);
            return;
          }
          _this.lastThingProperty = res.data.value.list;
          resolve();
        });
      });
    });

    //获取用户属性
    network.then((value) => {
      let params = {
        req: {
          type: "user",
          needEventTime: true,
        },
        operationCtx: {},
      };
      propertyList(params).then((res) => {
        // 返回状态码如果不是成功说明异常 弹出提示
        if (res.data.success !== true) {
          this.$message.error(res.data.errorMessage);
          return;
        }
        _this.userPropertiesList = res.data.value.list;
      });
    });
  },
  mounted() {
    //获取昨天的时间
    this.getYesterday();
    //加载图表
    this.reloadChart();
  },
};
</script>

<style lang="scss" scoped>
#index {
  width: 98%;
  margin: 0 auto;
  height: 98%;
  font-size: 14px;
  color: #475669;
}

* {
  touch-action: pan-y;
}

.timeBox {
  height: 32px;
  margin-right: 15px;
  margin-left: 15px;
  z-index: 100;
}

.toDoButton {
  width: 192px;
  position: absolute;
  right: 0px;
}

.app {
  padding: 6px 10px;
  height: 34px;
  line-height: 20px;
  min-width: 60px;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
  border-radius: 3px;
}

.step-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  &-thing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-set {
      display: inline-block;
      margin-right: 10px;
    }
  }
  &-rel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}

.filterBox {
  padding: 0 15px 15px 15px;
  /*padding:10px 15px;*/
  background-color: #ffffff;
  border-radius: 5px;
  margin: 15px 0;
  margin-right: 20px;
  box-shadow: 0 2px 11px rgba(190, 202, 218, 0.17);
  .winPeriodBox {
    position: relative;
    display: flex;
    height: 60px;
    align-items: center;
  }

  .display-setting-box {
    position: absolute;
    height: 230px;
    width: 268px;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //设置两层阴影
  }

  .lineHeader {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    margin: 10px;
    display: flex;
    div {
      font-size: small;
      margin-left: 10px !important;
    }
  }
}
</style>

